<template>
  <div class="home">
    <propertys v-model:attrs="attrs" v-model:arr="arr"></propertys>
    <div>
      <button class="reset" @click="reset">重置</button>
      <p v-if="attrs.length === 0">暂无属性组合</p>
      <table v-else border="1" cellspacing="0">
        <thead>
          <tr>
            <th v-for="(item, i) in attrs" :key="i">{{item}}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, i) in arr" :key="i">
            <td v-for="(it, ind) in item" :key="ind">{{it}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import Propertys from '@/components/Propertys'
import { reactive, toRefs } from 'vue'
export default {
  name: 'Home',
  components: {
    Propertys
  },

  setup() {
    const state = reactive({
      attrs: [], // 接收子组件选中的类别属性
      arr: []
    })

    function reset() {
      state.arr = []
      state.attrs = []
    }

    return {
      ...toRefs(state),
      reset
    }
  }
}
</script>
<style lang="scss" scoped>
  .home {
    width: 800px;
    margin: 100px auto;
  }
  .reset {
    width: 100px;
    height: 30px;
    margin-top: 20px;
    font-size: 18px;
  }
  table {
    width: 100%;
    margin-top: 20px;
  }
</style>
